<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>评价页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <style type="text/css">
        section#kuaikuai-tab .am-tabs-bd .am-tab-panel{background-color: #eee;}
        .am-header{padding: 0 13px; margin-bottom: 10px;}
        .am-header h3.am-text-lg{border: 1px solid #eee; background-color: #fff;}
        .kuaikuai-pic{position:relative;color:#fff;margin:0 0 10px 0;padding:3px 20px;background-image: url('../assets/i/ticket/q1-1.png');background-size:cover;width: 100%;height: 75px;text-align: center;}
        .out{background-image: url('../assets/i/ticket/q1-out-n.png') !important;}
        .kuaikuai-pic .su p, .kuaikuai-pic .su h3{color: #000000;margin: 0 !important;}
        .kuaikuai-pic .su p{line-height: 14px;}
        .kuaikuai-pic .su p.am-text-xs{color: #666666;}

        .kuaikuai-pic aside{padding:0; margin-right: 20px;}
        .kuaikuai-pic aside .amount{display: block;}
        .kuaikuai-pic aside .amount:before{display: inline-block;content: '\FFE5';font-size: 2.2rem;}

        .kuaikuai-pic2{position:relative;color:#fff;margin:0 0 10px 0;padding:5px 70px;background-image: url('../assets/i/ticket/t1.png');background-size:cover;width: 100%;height: 75px;text-align: center;}
        .out2{background-image: url('../assets/i/ticket/t1-out.png') !important; color: #d0d0d0;}
        section.am-new{width: 100%;text-align: left;}

        @media only screen and (min-width:321px) and (max-width:375px){
            .kuaikuai-pic, .kuaikuai-pic2{ height: 85px; padding-top:8px;}
            .kuaikuai-pic2{padding-left: 80px;}
            .kuaikuai-pic aside{margin-right: 25px;}
        }

        @media only screen and (min-width:376px) and (max-width:414px){
            .kuaikuai-pic, .kuaikuai-pic2{ height: 95px; padding-top:12px;}
            .kuaikuai-pic2{padding-left: 90px;}
            .kuaikuai-pic aside{margin-right: 25px;}
        }

    </style>
</head>
<body class="am-with-topbar-fixed-bottom">
<!-- Start kuaikuai-tab -->
<section id="kuaikuai-tab">
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <!-- 添加 am-topbar-fixed-top -->
        <ul class="am-tabs-nav tabs-nav am-cf">
            <li class="am-active">
                <a data-kuai-tabs="0">洗车券</a>
            </li>
            <li>
                <a data-kuai-tabs="1">代金券</a>
            </li>
        </ul>
        <div class="am-tabs-bd" id="ok" style="border: none">
            <!-- Start 洗车券 -->
            <div class="am-tab-panel am-active" data="tab1">
                <header class="am-header">
                    <h3 class="am-text-lg">
                        <a href="howTicket.html">洗车券使用说明</a>
                    </h3>
                </header>

                <!-- 代金券一 -->
                <section class="am am-figure am-figure-default kuaikuai-pic">
                    <aside class="am-u-sm-4">
                        <span class="amount am-text-xxxl">8</span>
                    </aside>

                    <section class="am-u-sm-7 su" style="text-align: left; float: left;padding: 0;">
                        <h3 class="am-text-default">代金券</h3>
                        <p class="am-text-xs">购买快快极致打蜡消费券时</p>
                        <p class="am-text-xs">自动抵扣（每次只能使用1次）</p>
                        <p>有效截止日期：2015-3-9</p>
                    </section>
                </section>

                <!-- 代金券二 -->
                <section class="am am-figure am-figure-default kuaikuai-pic">
                    <aside class="am-u-sm-4">
                        <span class="amount am-text-xxxl">8</span>
                    </aside>

                    <section class="am-u-sm-7 su" style="text-align: left; float: left;padding: 0;">
                        <h3 class="am-text-default">代金券</h3>
                        <p class="am-text-xs">购买快快极致打蜡消费券时</p>
                        <p class="am-text-xs">自动抵扣（每次只能使用1次）</p>
                        <p>有效截止日期：2015-3-9</p>
                    </section>
                </section>

                <!-- 代金券三 -->
                <section class="am am-figure am-figure-default kuaikuai-pic">
                    <aside class="am-u-sm-4">
                        <span class="amount am-text-xxxl">10</span>
                    </aside>

                    <section class="am-u-sm-7 su" style="text-align: left; float: left;padding: 0;">
                        <h3 class="am-text-default">代金券</h3>
                        <p class="am-text-xs">购买快快极致打蜡消费券时</p>
                        <p class="am-text-xs">自动抵扣（每次只能使用1次）</p>
                        <p>有效截止日期：2015-3-9</p>
                    </section>
                </section>

                <!-- 代金券失效 -->
                <section class="am am-figure am-figure-default kuaikuai-pic out">
                    <aside class="am-u-sm-4">
                        <span class="amount am-text-xxxl">10</span>
                    </aside>

                    <section class="am-u-sm-7 su" style="text-align: left; float: left;padding: 0;">
                        <h3 class="am-text-default">代金券</h3>
                        <p class="am-text-xs">购买快快极致打蜡消费券时</p>
                        <p class="am-text-xs">自动抵扣（每次只能使用1次）</p>
                        <p>有效截止日期：2015-3-9</p>
                    </section>
                </section>

            </div>
            <!-- End 洗车券 -->

            <!-- Start 代金券 -->
            <div class="am-tab-panel " data="tab2">
                <header class="am-header">
                    <h3 class="am-text-lg">
                        <a href="howTicket.html">代金券使用说明</a>
                    </h3>
                </header>

                <!-- 代金券1 -->
                <section class="am am-figure am-figure-default kuaikuai-pic2">
                    <section class="am-g am-new">
                        <p class="am-text-lg">券号：804652</p>
                        <p>快快极致打蜡洗车</p>
                        <p>有效日期：2015-6-30</p>
                    </section>
                </section>

                <!-- 代金券2 -->
                <section class="am am-figure am-figure-default kuaikuai-pic2 out2">
                    <section class="am-g am-new">
                        <p class="am-text-lg">券号：804652</p>
                        <p>快快极致打蜡洗车</p>
                        <p>有效日期：2015-6-30</p>
                    </section>
                </section>
            </div>
            <!-- End 代金券 -->
        </div>
    </div>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script src="../assets/js/kuaikuai.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('section.kuaikuai-pic').on('click', function() {
            window.location.href = "getTicket.html";
        });

        $('section.kuaikuai-pic2').on('click', function() {
            window.location.href = "getTicket2.html";
        });
    });
</script>
</body>
</html>